<template>
  <div class="app-container">
    <manual-filter :tag="1" @on-filter="submitFilterForm"/>
    <el-table height="540" :data="tableData.list" v-loading="loading" element-loading-text="加载中..."  :row-class-name="tableRowClassName">
      <el-table-column :label="$t('language.finance.withdrawal.requestTime')"  width="90" align="center">
        <template slot-scope="{row}">
          <div>{{row.createDate | toTime}}</div>
        </template>
      </el-table-column>

      <el-table-column :label="$t('language.finance.withdrawal.billNo')" width="100" prop="orderId" align="center">
        <template slot-scope="{row}">
          <div :class="{'active': row.splitStatus == 1}">{{row.orderId}}</div>
        </template>
      </el-table-column>

      <el-table-column :label="$t('language.finance.withdrawal.splitRelatedTxn')" prop="batchNumber" align="center">
      </el-table-column>

      <el-table-column :label="$t('language.finance.withdrawal.accountType')" prop="userType" align="center">
        <template slot-scope="{row}">
          {{toSwitchData('language.finance.consts.USER_TYPE', row.userType)}}
        </template>
      </el-table-column>

      <el-table-column :label="$t('language.finance.withdrawal.withdrawalType')" prop="aisleType" align="center">
        <template slot-scope="{row}" >
          {{toSwitchData('language.finance.consts.WITHDRAW_TYPE', row.aisleType)}}
        </template>
      </el-table-column>

      <el-table-column :label="$t('language.finance.withdrawal.level')" prop="userLevel" align="center">
      </el-table-column>

      <el-table-column :label="$t('language.finance.withdrawal.accountName')" prop="username" align="center">
      </el-table-column>
        <el-table-column :label="$t('language.finance.withdrawal.name')" prop="reallyName" align="center">
        </el-table-column>
      <!--<el-table-column sortable :label="$t('language.finance.withdrawal.amount')"  width="100" prop="amount" align="center">
        <template slot-scope="{row}">
          {{row.amount | currency}}
        </template>
      </el-table-column>-->
      <!--sortable-->
      <!--<el-table-column sortable :label="$t('language.finance.withdrawal.fee')" width="90" prop="fee" align="center">
        <template slot-scope="{row}">
          {{row.fee | currency('', 2, {type: 1})}}
        </template>
      </el-table-column>-->
      <el-table-column :sortable="true" :sort-by="formatter" :label="$t('language.finance.withdrawal.payoutConfirmation')" width="100" prop="moneyCheck" align="center">
          <template slot-scope="{row}">
          {{row.paragraph | currency}}
        </template>
      </el-table-column>

      <el-table-column :label="$t('language.finance.withdrawal.label')" width="150" prop="moneyCheck" fixed="right" align="center">
        <template slot-scope="{row,$index}">
          <el-tooltip effect="dark" :content="row.tag" placement="top" v-if="row.tag">
            <div class="undeline-link text-nowrap" @click="handleChangeComment($index,row)">{{row.tag}}</div>
          </el-tooltip>
          <div v-else class="undeline-link" @click="handleChangeComment($index,row)">{{$t('language.finance.withdrawal.addLabel')}}</div>
        </template>
      </el-table-column>

      <!--<el-table-column label="用户提现银行" align="center">-->
        <el-table-column :label="$t('language.finance.withdrawal.customersWithdrawbankName')" prop="bankName" width="90" align="center">
        </el-table-column>
        <!--<el-table-column label="卡号" prop="cardNo" width="150" align="center">-->
          <!--<template slot-scope="{row}">-->
            <!--<span class="clipboard-btn" :data-clipboard-text="row.cardNo" >{{row.cardNo}}</span>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column label="开户行地址" prop="address" width="120" align="center">-->
        <!--</el-table-column>-->
      <!--</el-table-column>-->
     <!-- <el-table-column :label="$t('language.finance.withdrawal.userName')" width="100" prop="name" align="center">
        <template slot-scope="{row}">
          <span class="clipboard-btn" :data-clipboard-text="row.name" >{{row.name}}</span>
        </template>
      </el-table-column>-->
      <!--<el-table-column label="出款商户" width="180" prop="merchant" align="center">-->
      <!--</el-table-column>-->
     <!-- <el-table-column :label="$t('language.finance.withdrawal.operationEnd')"  prop="clientType" align="center">
        <template slot-scope="{row}">
          {{row.clientType | toConverter('PAYMENT_PLATFORM')}}
        </template>
      </el-table-column>-->
      <el-table-column :label="$t('language.finance.withdrawal.handler')" width="90" prop="seperator" align="center">
      </el-table-column>
      <!--<el-table-column label="出款时间" width="90" prop="lastUpdate" align="center">-->
        <!--<template slot-scope="{row}">-->
          <!--{{row.lastUpdate| toTime}}-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column :label="$t('language.finance.withdrawal.dispenser')" width="120" prop="seperateCreator" align="center">
      </el-table-column>

      <el-table-column :label="$t('language.finance.withdrawal.dispenseTime')" width="90" prop="seperateDate" align="center">
        <template slot-scope="{row}">
          {{row.seperateDate | toTime}}
        </template>
      </el-table-column>

      <el-table-column :label="$t('language.finance.withdrawal.riskControlApprovalTime')" width="90" prop="riskApvTime" align="center">
        <template slot-scope="{row}">
          {{row.riskApvTime | toTime}}
        </template>
      </el-table-column>

      <el-table-column :label="$t('language.finance.withdrawal.status')"  width="100" prop="status" align="center">
        <template slot-scope="{row}">
          {{ toSwitchData('language.finance.consts.MANUAL_WITHDRAW_STATUS_ONE', row.status) }}
        </template>
      </el-table-column>

      <el-table-column :label="$t('language.finance.withdrawal.remarks')" width="150" prop="remark" align="center">
      </el-table-column>

      <el-table-column :label="$t('language.finance.withdrawal.operation')" width="200" fixed="right" align="center">
        <template slot-scope="{row}">
          <el-button-group v-if="[0,11].indexOf(row.status)>-1">
            <el-button v-if="roleCheck('manual-agree')" type="warning"
                       size="mini"
                       @click="setStep('agree');changeStatu(row)" >{{$t('language.finance.withdrawal.pass')}}
            </el-button>
            <el-button v-if="roleCheck('manual-refuse')" type="danger"
                       size="mini"
                       @click="setStep('refuse');changeStatu(row)" >{{$t('language.finance.withdrawal.refuse')}}
            </el-button>
          </el-button-group>
          <span v-else>-</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="font-size:12px;margin-top:30px;color:grey;">
      <span>注1：提现拆过单的提现单号，会以淡棕底色显示；在注单筛选位置输入注单号并勾选关联拆单搜索，即可筛选出晒单相关联的注单</span><br>
      <span>注2：若是一笔人工出款单拆单后进入了不同的页面（审核等等）则可以在相关联的位置进行注单关联搜索</span><br>
      <span>注3：拆单关联号说明，例子：1-2-1（1-代表单个会员拆单数，2-代表此单一共拆成几个提现单，1-代表拆单中的第几单），拆单关联号号码以天为周期</span>
    </div>
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
    <comment-dialog
      v-model="commentDialogVisible"
      :row-data="rowData"
      @cancel="commentDialogVisible = false"
      @submit="commentChangeNow"/>
    <normal-withdraw-dialog
      v-if="dialogName === 'normal-withdraw-dialog'"
      v-model="dialogVisible"
      :id="dialogProps.id"
      :row-data="dialogProps"
      :step = "step"
      @submit="submitFinished"/>
  </div>
</template>


<script>
import { getWithdrawList, seperatorOperation } from '@/services/api/withdraw';
import {
  grid, constsLabel, dialog, switchData,
} from '@/build';
import ManualFilter from '@/views/finance/withdraw/manualFilter';
import NormalWithdrawDialog from '@/views/finance/withdraw/normalWithdrawDialog';
import CommentDialog from './commentDialog';
import { Decimal } from 'decimal.js';

export default {
  name: 'withdraw-normal',
  components: { NormalWithdrawDialog, ManualFilter, CommentDialog },
  mixins: [grid, constsLabel, dialog, switchData],
  data() {
    return {
      activeClass: 'active',
      tableData: {},
      rowData: {},
      commentDialogVisible: false,
      filters: {
        dateType: 1,
        searchType: 2,
        size: 20,
        page: 1,
        withdrawType: 0,
        status: [11, -3, 0],
        startTime: moment().format('YYYY-MM-DD 00:00:00'),
        endTime: moment().format('YYYY-MM-DD 23:59:59'),
        userLevel: [],
        splitStatus: -1,
      },
      dialogVisible: false,
      step: 'agree',
      type: 1,
      orderId: '',
      seperatorObj: {},
    };
  },
  methods: {
    tableRowClassName({ row }) {
      if (row.dealWithStatus == 1) {
        return 'warning-row';
      }
      return '';
    },
    setStep(step) {
      this.step = step;
    },
    formatter(row, column) {
      return row.paragraph;
    },
    // 显示添加备注的Modal
    handleChangeComment(index, row) {
      this.commentDialogVisible = true;
      this.rowData = row;
    },
    commentChangeNow(form) {
      this.commentDialogVisible = false;
    },
    changeStatu(row) {
      this.orderId = row.orderId;
      this.type = 1;
      this.doGet({ action: 'setGrid' });
      this.openDialog({ dialogName: 'normal-withdraw-dialog', props: row });
    },
  },
  mounted() {
    this.bindGet(getWithdrawList, 'tableData', {
      action: 'getGrid',
      beforeSend: (data) => {
        if (data.splitType) {
          data.splitType = 1;
        } else {
          data.splitType = undefined;
        }
        if (data.userLevel.length > 0) {
          data.userLevel = data.userLevel.join(',');
        }
        data.status = data.status.join(',');
        delete data.time;
        return data;
      },
      sendingData: 'filters',
      format: (data) => {
        data.list.forEach((v, k) => {
          this.$set(v, 'paragraph', _.ceilDecimal(_.sub(v.amount, v.fee), 2));
          // down = 0 舍
          // half_up = 1 四舍五入
          // half_even = 2 五舍
          // up = 3入
        });
        return data;
      },
    });
    this.bindGet(seperatorOperation, 'seperatorObj', {
      action: 'setGrid',
      beforeSend: () => ({
        type: this.type,
        orderId: this.orderId,
      }),
      format: () => {
        this.gridSearch();
      },
    });
    this.doGet({ action: 'getGrid' });
  },
};
</script>

<style lang="scss" scoped>
  .undeline-link {
    display: block;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
  }
  .active{
    color:#F4A460;;
  }
  .app-container .el-table /deep/ .warning-row {
    background-color: oldlace !important;
  }
   /deep/ thead .cell{word-break:break-word;}
</style>
